<template>
	<view class="index">
       	   
	   <banner :ad-list="adList" h=187.5></banner>
	   
	   <view class="container">
		   <view class="title">拉新项目</view>
		   
		   <view class="list">
			   <view class="item" v-for="(item, index) in menus" :key="index">
				   <view class="icon">
					   <image :src="item.icon_image" mode=""></image>
				   </view>
				   <view class="right">
					   <view class="info">
						   <view class="name">{{item.name}}</view>
						   <view class="desc">{{item.desc}}</view>
					   </view>
					   <view class="btn" @tap="toDetail(item)">查看活动</view>
				   </view>
				   
			   </view>
		   </view>
		   
		   <view class="tips">更多拉新活动，敬请期待……</view>
	   </view>
	   
	   
	</view>
</template>

<script>
	
	import uniIcon from '../../components/uni-icon.vue';
	import banner from '../../components/banner.vue';
	import Request from '../../common/request.js';
	
	import { checkAdType } from '../../common/base.js';
	
	export default {
		components: {
			uniIcon, banner
		},
		data() {
			return {
				adList: [],
				menus: []
			}
		},
		
		onLoad(options) {
			if(options.token){
				uni.setStorageSync('token', options.token);
			}
			uni.showLoading({
				mask: true
			})
			this.getIndexData(() => {
				uni.hideLoading()
			});
		},
		methods: {
			//检查广告类型
			checkType: function(item) {
				checkAdType(item);
			},
			//获取首页接口数据
			getIndexData: function(callback){
				var that = this;
				var params = {
					url: 'activity/index',
					needLogin: false,
					sCallback: function(res) {
						
						that.adList = res.data.banner;
						that.menus = res.data.activity;
						callback && callback();
					}
				}
				
				Request.send(params);
			},
			// 云活动详情
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/activity/detail?id='+item.id
				})
			}
		}
	}
</script>

<style scoped>
	page{
		background: #FE544C;
		color: #FEF4F4;
	}
	
	.container{
		padding: 40upx;
	}
	
	.container .title{
		font-size: 40upx;
		text-align: center;
	}
	
	.container .item{
		background: #fff;
		color: #AFAFAF;
		margin-top: 20upx;
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 40upx 20upx;
		box-sizing: border-box;
		align-items: center;
		border-radius: 10upx;
	}
	.container .icon{
		margin-right: 10upx;
		display: flex;
		align-items: center;
	}
	
	.container .icon image{
		width: 60upx;
		height: 60upx;
	}
	
	.container .item .right{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.container .item .name{
		color: #F0271D;
		font-size: 36upx;
		font-weight: 600;
	}
	
	.container .item .desc{
		font-size: 24upx;
	}
	
	.container .item .btn{
		background: #FF554D;
		color:#fff;
		height: 60upx;
		display: flex;
		padding: 0 20upx;
		border-radius: 30upx;
		align-items: center;
		font-size: 24upx;
	}
	
	.container .tips{
		text-align: center;
		margin-top: 40upx;
	}
</style>
